<template>
  <div class="info-box">
    <div class="info-title">
      <span class="text">
        <van-icon :name="icon || 'records'" :color="color || 'black'"/>
        {{title}}
      </span>
      <span class="button" v-if="openBtn" @click="showHiddenArea = !showHiddenArea">
        {{showHiddenArea ? '收起' : '展开'}}
        <van-icon name="arrow-down" v-if="!showHiddenArea" />
        <van-icon name="arrow-up" v-else />
      </span>
    </div>
    <div class="info-detail">
      <slot></slot>
      <template v-if="showHiddenArea">
        <div style="width: 100%"></div>
        <slot name="more"></slot>
      </template>
    </div>
    <div class="info-btns" v-if="showHiddenArea">
      <slot name="button"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Info',
  data () {
    return {
      showHiddenArea: false
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    openBtn: {
      type: Boolean,
      default: true
    },
    icon: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    }
  },
  methods: {
    onClickToggle () {
      this.$router.push('/')
    }
  }
}
</script>

<style scoped lang='less'>
.info-box {
  background: #fff;
  border-radius: 4px;
  padding: 8px 13px 0 13px;
  margin-bottom: 5px;
  .info-title {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 5px;
    font-size: 14px; line-height: 30px;
    .text {
      flex: auto
    }
    .button {
      flex-shrink: 0;
      color: #999; font-size: 13px;
    }
  }
  .info-detail {
    display: flex; flex-wrap: wrap;
    color: #666; font-size: 13px;
    padding-bottom: 10px;
  }
  .info-btns {
    display: flex; justify-content: space-between;
    border-top: solid 1px #f5f5f5;
  }
}
</style>
